<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="./css/userCard.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script src="./utils/request.js"></script>
    <script src="../assets/qs/qs.js"></script>
    <style>
        .img-list{
            display: flex;
            flex-flow: row wrap;
        }
        .img-list .img-box{
            margin: 10px;
            width: 240px;
            height: 240px;
            border: 2px solid #999;
            border-radius: 4px;
            opacity: 1;
            transform: translate(0,0);
            position: relative;
        }
        .img-list .img-box.in{
            animation: moveIn ease 800ms forwards;
        }
        .img-list .img-box.out{
            animation: moveOut ease 800ms forwards;
        }
        @keyframes moveIn{
            0%{
                opacity: 0;
                transform: translate(0,-50%);
            }
            100%{
                opacity: 1;
                transform: translate(0,0);
            }
        }
        @keyframes moveOut{
            0%{
                opacity: 1;
                transform: translate(0,0);
            }
            100%{
                opacity: 0;
                transform: translate(0,-50%);
            }
        }

        .img-list .img-box > img{
            width: 100%;
            height: 100%;
            background-color: #dedede;
            object-fit: scale-down;
            object-position: center;
        }
        .img-list .img-box .progress-box{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            filter: blur(50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .img-list .img-box .progress{
            width: 90%;
            height: 20px;
            border: 2px solid #ccc;
        }
        .img-list .img-box .progress>span{
            display: inline-block;
            height: 100%;
            background-color: rgba(255, 166, 0, 0.8);
            width: 0%;
            color: white;
            text-align: center;
        }
        .upload-btn{
            display: inline-block;
            /* background-color: #ccc; */
            border: 2px dashed #409eff;
            border-radius: 4px;
            width: 240px;
            height: 240px;
            text-align: center;
            margin: 10px;
        }
        .upload-btn .iconfont{
            line-height: 240px;
            font-size: 30px;
            color: #ccc;
        }
        .upload-btn input[type="file"]{
            display: none;
        }
        
    </style>
    <script>
        function createImgBox(path){
            let divDom = document.createElement("div")
            divDom.classList.add("img-box","in")
            let imgDom = new Image()
            // 设置图片高斯模糊
            imgDom.style.filter = "blur(4px)"
            imgDom.src = path;

            divDom.appendChild(imgDom)

            // 进度控制标签
            let spanDom = document.createElement("span")
            spanDom.textContent = "0%"
            let progressDom = document.createElement("div")
            progressDom.classList.add("progress")
            let progressBoxDom = document.createElement("div")
            progressBoxDom.classList.add("progress-box")
            progressDom.appendChild(spanDom)
            progressBoxDom.appendChild(progressDom)

            divDom.appendChild(progressBoxDom)

            let listBox = document.querySelector(".img-list")
            let btnDom = document.querySelector(".upload-btn")
            // listBox.appendChild( divDom )
            listBox.insertBefore( divDom,btnDom )

            divDom.onanimationend = function(event){
                // console.log(event);
                if(event.animationName=="moveOut"){
                    listBox.removeChild(divDom);
                }
            }

            return {
                clear:function(){
                    // console.log(divDom);
                    setTimeout(function(){
                        // listBox.removeChild(divDom);
                        divDom.classList.remove("in")
                        divDom.classList.add("out")
                    },1000)
                },
                setPath:function(path){
                    imgDom.src = path;
                },
                setProgress:function(pre="0%"){
                    spanDom.textContent = pre;
                    spanDom.style.width = pre;
                    if(pre=="100%"){
                        // progressBoxDom.style.display = "none"
                        divDom.removeChild(progressBoxDom)
                        // 取消图片高斯模糊
                        imgDom.style.filter = null;
                    }
                }
            }
        }
        function chooseFile(fileDom){
            console.log( fileDom.files[0] )
            
            // 完成页面交互
            let imgBox = createImgBox( URL.createObjectURL(fileDom.files[0]) )
            // 完成文件上传
            let fd = new FormData();
            fd.append("img",fileDom.files[0])
            axios({
                url:"http://127.0.0.1:3000/api/files",
                method:"post",
                data:fd,
                // 定义ajax请求发送过程中的进度
                onUploadProgress:function(event){
                    // console.log(event)
                    // console.log(event.progress*100 + "%")
                    // console.log( parseInt(event.progress*100) + "%")
                    imgBox.setProgress( parseInt(event.progress*100) + "%" )
                }
            }).then(function(data){
                // 业务逻辑处理
                // console.log(data);
                if(data.state){
                    imgBox.setPath( data.path.img )
                }else{
                    imgBox.clear()
                }
            }).catch(function(){
                imgBox.clear()
            })

        }

    </script>
</head>
<body>
    <h3>照片墙</h3>
    <div class="img-list">
        <!-- <div class="img-box">
            <img src="../assets/img/01.png" alt="" srcset="">
            <div class="progress-box">
                <div class="progress">
                    <span>0%</span>
                </div>
            </div>
        </div> -->
        <label class="upload-btn">
            <input type="file" onchange="chooseFile(this)">
            <i class="iconfont icon-add"></i>
            <img src="" alt="">
        </label>
    </div>
</body>
</html>